<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>陈记酒楼</title>
    <link rel="icon" href="./../images/favico.ico">
    <!--不同屏幕尺寸根字体设置-->
    <script src="./../js/base.js"></script>
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
    <!-- 引入样式  -->
    <link rel="stylesheet" href="../styles/index.css" />
    <!--本页面内容的样式-->
    <link rel="stylesheet" href="./../styles/pay-success.css" />
</head>

<body>
    <div id="pay_success" class="app">
        <div class="divHead">
            <div class="divTitle">
                <i class="el-icon-arrow-left" @click="goBack"></i>
                陈记酒楼
                <img src="./../images/home.png" @click="toMainPage" />
            </div>
        </div>
        <!-- 正在加载中 -->
        <div class="divPay" v-if="loading && orderData.status==2">
            <div class="divSuccess" style="font-size: 18px;">正在下单中</div>
        </div>
        <!-- 支付失败 -->
        <div class="divContent" v-if="loading && orderData.status!=2">
            <img src="./../images/lose.png" />
            <div class="divSuccess">支付失败！</div>
            <div class="divDesc1">支付失败了，请您查看订单信息~</div>
            <div class="btnView" @click="toOrderPage">查看订单</div>
        </div>
        <!-- 支付成功 -->
        <div class="divContent" v-else="!loading">
            <img src="./../images/success.png" />
            <div class="divSuccess">下单成功</div>
            <div class="divDesc">预计{{finishTime}}到达</div>
            <div class="divDesc1">后厨正在加紧制作中，请耐心等待~</div>
            <div class="btnView" @click="toOrderPage">查看订单</div>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../backend/plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../backend/plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../backend/plugins/axios/axios.min.js"></script>
    <script src="./../js/request.js"></script>
    <script src="./../api/main.js"></script>
    <script>
        new Vue({
            el: "#pay_success",
            data() {
                return {
                    finishTime: '',
                    loading: true,
                    orderId: null,
                    orderData: []
                }
            },
            computed: {},
            created() {
                this.getFinishTime()
            },
            mounted() {
                // 获取查询参数字符串（包括问号）
                const queryString = window.location.search;
                // 使用 URLSearchParams 解析查询参数
                const urlParams = new URLSearchParams(queryString);
                // 获取 out_trade_no 参数的值
                this.orderId = urlParams.get('out_trade_no');
                this.getOrderPayApi()
                console.log('out_trade_no:',this.orderId);
            },
            methods: {
                goBack() {
                    window.requestAnimationFrame(() => {
                        window.location.replace('/front/index.html')
                    })
                },
                toOrderPage() {
                    window.requestAnimationFrame(() => {
                        window.location.replace('/front/page/order.html')
                    })
                },
                toMainPage() {
                    window.requestAnimationFrame(() => {
                        window.location.replace('/front/index.html')
                    })
                },
                //获取送达时间
                getFinishTime() {
                    let now = new Date()
                    let hour = now.getHours() + 1
                    let minute = now.getMinutes()
                    if (hour.toString().length < 2) {
                        hour = '0' + hour
                    }
                    if (minute.toString().length < 2) {
                        minute = '0' + minute
                    }
                    this.finishTime = hour + ':' + minute
                },


                async getOrderPayApi() {
                    const loading = this.$loading({
                        lock: true,
                        text: '正在支付中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    const res = await getPayApi(this.orderId)
                    if (res.code === 1) {
                        this.loading = false
                        loading.close();
                        this.orderData = res.data
                    } else {
                        this.$notify({ type: 'warning',message: res.msg });
                    }
                }



            }
        })
    </script>
</body>

</html>